<template>
  <div class="home_coantainer">
    <!-- <h4>这是home组件</h4> -->
    <el-container>
      <el-header>
        <div class="home_logo">
          <h3>
            <a href="javascirpt:;" title="电商后台管理系统">电商后台管理系统</a>
          </h3>
          <h1>电商后台管理系统</h1>
        </div>
        <!-- 实现：对于携带token令牌才能访问到非登录页面，退出功能的实现很简单，就是销毁掉token，并导航到登录页即可 -->
        <el-button type="info" @click="quitePage">退出</el-button>
      </el-header>
      <el-container>
        <el-aside width="200px" class="layout_aside" :style="{ width: isCollapse ? '64px' : '200px' }">
          <!--加一个按钮整体控制菜单的展开与折叠-->
          <div class="toggle-button" @click="toggleCollapse">|||</div>
          <!--每次只展开一个一级菜单项，
            1.使用unique-opened属性控制。方式为直接写 unique-opened或者 :unique-opened="true" 注意是绑定属性
            2. :collapse属性控制列表项的展开与折叠，false展开，true折叠
            3. collapse-transition是预设的折叠动画，默认开启。为了使折叠更流畅，设为false,关闭自带折叠动画
            4.router 同unique-opened,是绑定属性（：不能少），默认为false,开启后可以使用路由了，无需再声明或编程式导航定义
            5.default-active 属性值为string,把index赋给它，就能激活当前index二级菜单项
          -->
          <el-menu
            ref="menu"
            :default-active="activePath"
            class="el-menu-vertical-demo"
            background-color="#333744"
            text-color="#fff"
            active-text-color="#409eff"
            :collapse="isCollapse"
            :collapse-transition="false"
            router
            unique-opened
          >
            <!--一级菜单 :index的值不一定要用1,2,3……，只要是连续的正整数即可，而使用两层嵌套的索引相当麻烦，故而使用item.id,
            :index只接收字符串，不接收数值，item.id为数值，拼接一个''即可-->
            <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
              <template slot="title">
                <i :class="['iconfont', iconsObj[item.id]]"></i>
                <span>{{ item.authName }}</span>
              </template>
              <!--二级菜单，通过测试el-menu-item就对应被点击的每个子项
              在router属性启用后,:index的属性值就是当前路由的地址，相当于$route.path
              -->
              <el-menu-item @click="handleItemSelected('/' + val.path)" :index="'/' + val.path" v-for="val in item.children" :key="val.id">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>{{ val.authName }}</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 存储aside列表项
      menuList: [],
      // 存储不同索引下一级菜单的字体图标
      iconsObj: {
        125: 'icon-user',
        103: 'icon-tijikongjian',
        101: 'icon-shangpin',
        102: 'icon-danju',
        145: 'icon-baobiao'
      },
      // 控制是否水平折叠和展开菜单项，默认是展开的
      isCollapse: false,
      // 激活的链接的地址
      activePath: ''
    };
  },
  // 跳转到该url,就应该立即加载左侧列表信息---生命周期钩子
  created() {
    this.getMenuList();
    this.activePath = sessionStorage.getItem('activePath');
    console.log(this.activePath); // 测试一下，切换子项页面重新渲染后，this.activePath的值
  },
  methods: {
    quitePage() {
      // 销毁token，如不销毁token,此时在登录页面，更改url为/home就可以跳转到/home页面了
      sessionStorage.clear();
      // 编程式导航-回到登录页面
      this.$router.push('/login');
    },
    // 从接口获取左侧列表项数据
    async getMenuList() {
      const { data: res } = await this.$http.get('menus');
      console.log(res);
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
      this.menuList = res.data;
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    // 注意：页面重新刷新在data中定义的变量又恢复默认值
    // 1.保存链接的激活状态以及展开状态，子项选中对应路由后，重新刷新页面，之前点击选中的路由文本“蓝色”消失了，同时二级菜单折叠在了
    // 一级菜单中。为此，需要借助el-menu中的default-active属性，default-active表示当前激活菜单的 index，属性值为string类型
    handleItemSelected(activePath) {
      // a.把当前选中的路由子项对应地址存储在键activePath中
      sessionStorage.setItem('activePath', activePath);
      // b.把参数传递过来的路径赋值给定义的activePath
      this.activePath = activePath;
      // c.然后把activePath动态绑定给default-active属性。然而，当子项被选中，然后刷新页面时，this.activePath又回到了默认值''。
      // 为此，需要借助生命周期函数，当页面开始渲染时，在created阶段，把保存在sessionStorage中的新路径值取出，并赋值给el-menu中
      // 的default-active属性，以替代页面刷新后恢复activePath默认值空字符
    }
  }
};
</script>

<style lang="less" scoped>
.home_coantainer {
  height: 100%;
  .el-container {
    height: 100%;
    .el-header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      background-color: #333744;
      .home_logo {
        width: 235px;
        height: 60px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        h3 {
          height: 100%;
          margin: 0;
          padding: 2px 0;
          a {
            display: block;
            width: 61px;
            height: 56px;
            background: url('../assets/images/nav-logo.png') no-repeat;
            text-indent: -9999px;
          }
        }
        h1 {
          margin: 0;
          height: 60px;
          line-height: 60px;
          color: #ffffff;
          font-size: 20px;
        }
      }
      .el-button--info {
        margin: 10px 0;
      }
    }
    .layout_aside {
      background-color: #333744;
      /* 整体控制菜单项的展开与折叠 */
      .toggle-button {
        background-color: #4a5064;
        line-height: 24px;
        color: #ffffff;
        font-size: 14px;
        /* 控制文本字符的间距 */
        letter-spacing: 0.2em;
        cursor: pointer;
      }
      .el-menu {
        /*  去除默认的右边框线，使得一级菜单项和二级菜单项上下对齐 */
        border: 0;
        .el-submenu {
          .el-submenu__title {
            font-size: 16px !important;
            i {
              margin-right: 20px;
            }
            span {
              font-size: 16px;
            }
          }
          .el-menu--inline {
            .el-menu-item {
              padding: 0 20px 0 70px;
              i {
                margin-right: 20px;
              }
            }
          }
        }
      }
    }
  }
}

.el-header {
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
